<template>
	<div>
		<!-- 面包屑实现导航 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/adminHome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>新增</el-breadcrumb-item>		
		</el-breadcrumb>
		
		<!-- 卡片 -->
		<el-card class="box-card" style="margin-top: 1.25rem;">
		  <div slot="header" class="clearfix">
		    <span>表单数据</span>
		  </div>
		  <!-- 表单 -->
		  <el-form :model="admin" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  	<el-form-item label="用户名" prop="adminName">
		  		<el-input type="text" v-model="admin.adminName" autocomplete="off"></el-input>
		  	</el-form-item>
		  	<el-form-item label="密码" prop="password">
		  		<el-input type="password" v-model="admin.password" autocomplete="off"></el-input>
		  	</el-form-item>
			
			<el-form-item label="性别" prop="sex">
				<el-input type="text" v-model="admin.sex" autocomplete="off"></el-input>
			</el-form-item>
			
			<el-form-item label="年龄" prop="age">
				<el-input type="text" v-model.number="admin.age" autocomplete="off"></el-input>
			</el-form-item>
			
			<el-form-item label="电话" prop="phone">
		  		<el-input type="text" v-model="admin.phone" autocomplete="off"></el-input>
		  	</el-form-item>
			<el-form-item label="头像" >
				<!--
				action:上传的地址
				list-type：图片列表的展示格式 
				on-preview：图片放大后的函数
				on-remove：图片移除的函数
				on-success：处理返回数据的函数
				-->
				<el-upload 
				    action="http://localhost:8080/vueupload"
				
					list-type="picture-card"
					
					:on-preview="handlePictureCardPreview"
					
					:on-remove="handleRemove"
					
					:on-success="handSuccess"
					>
					<i class="el-icon-plus"></i>
				
				</el-upload>
				<!-- 预览的组件 -->
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
				
			</el-form-item>
		  
		  	<el-form-item label="邮箱" prop="email">
		  		<el-input type="text" v-model="admin.email" autocomplete="off"></el-input>
		  	</el-form-item>
		  
		  	

		  </el-form>
		  
		  <div >
		  	<el-button @click="resetForm('ruleForm')">重置</el-button>
		  	<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
		  </div>
		  
		  
		</el-card>
	</div>
</template>

<script>
	
	import qs from 'qs'
	export default{
		data(){
			  var checkSex = (rule, value, callback) => {
			         if (value ==='') {
			           callback(new Error('请输入性别'));
			         } else if (value !== '男'&&value!='女') {
			           callback(new Error('请输入男!'));
			         } else {
			           callback();
			         }
			       };
				   
				 var checkAge = (rule, value, callback) => {
				        if (!value) {
				          return callback(new Error('年龄不能为空'));
				        }
				        setTimeout(() => {
				          if (!Number.isInteger(value)) {
				            callback(new Error('请输入数字值'));
				          } else {
				            if (value < 18) {
				              callback(new Error('必须年满18岁'));
				            } else {
				              callback();
				            }
				          }
				        }, 1000);
				      };
			return{
				admin:{
					
					
					
				},
				 dialogImageUrl:'',
				 dialogVisible: false,
				 rules:{
					 adminName:[
						  { required: true, message: '请输入活动名称', trigger: 'blur' },
						  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					 ],
					 password:[
						 { required: true, message: '请输入活动名称', trigger: 'blur' },
						 { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
					 ],
					  sex: [
					             { validator: checkSex, trigger: 'blur' }
					        ],
					 age: [
					            { validator: checkAge, trigger: 'blur' }
					          ],
					phone: [
					            { required: true, message: '请输入电话', trigger: 'blur' },
					            { min: 11, max: 11, message: '长度为11', trigger: 'blur' }
					          ],
					email:[
						  { required: true, message: '请输入邮箱地址', trigger: 'blur' },
						  { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
						  ]
				 }
				
				
				 
			}
		},
		methods:{
			// 处理上传后返回值的函数
			handSuccess(response) {
				if (response.code == 200) {
					
					this.admin.touXiang = response.message
					
					
				} else {
					
					this.$message.error('上传失败')
				}
			},
			// 图片移除
			 handleRemove(file, fileList) {
				 this.admin.touXiang=''
			        console.log(file);
			      },
			// 图片放大
			 handlePictureCardPreview(file) {
			        this.dialogImageUrl = file.url;
			        this.dialogVisible = true;
			      },
			// 重置
			resetForm(formName){
			
				this.$refs[formName].resetFields();
			},
			// 提交
			submitForm(formName){
				 this.$refs[formName].validate(async(valid) => {
				          if (valid) {
				            var str=await this.$http.post('addAdmin',qs.stringify(this.admin))
							if(str.data.code==200){
								this.$message('添加成功');
								this.$router.push('/userH')
							}
				          } else {
				            console.log('error submit!!');
				            return false;
				          }
				        });
			}
		}
	}
</script>

<style>
</style>
